<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1">
        <meta name="description" content="Modern UI CSS">
        <meta name="author" content="Sergey Pimenov">
        <meta name="keywords" content="windows 8, modern style, modern ui, style, modern, css, framework">

        <link href="css/modern.css" rel="stylesheet">
        <link href="css/theme-dark.css" rel="stylesheet">
        <link href="css/modern-responsive.css" rel="stylesheet">

        <script src="js/assets/jquery-1.8.2.min.js"></script>
        <script src="js/assets/google-analytics.js"></script>
        <script src="js/assets/jquery.mousewheel.min.js"></script>
        <script src="js/assets/github.info.js"></script>
        <script src="js/modern/tile-slider.js"></script>
        <script src="js/modern/start-menu.js"></script>
        <script src="js/modern/tile-drag.js"></script>
        <script src="./../javascript/accordion.js"></script>

        <title>Modern UI CSS</title>

        <style>
            body {
                background: #1d1d1d;
            }
        </style>

    </head>
    <body class="metrouicss">
        <div class="page secondary fixed-header">
            <div class="page-header ">
                <div class="page-header-content">
                    <div class="user-login">
                        <a href="#">
                            <div class="name">
                                <span class="first-name">First Name</span>
                                <span class="last-name">Last Name</span>
                            </div>
                            <div class="avatar">
                                <!--<img src="images/myface.jpg"/>-->
                                <i class="icon-user fg-color-white"></i>
                            </div>
                        </a>
                    </div>

                    <img src="images/logo.jpg" height="40px" width="123.2px"/>
                </div>
            </div>

            <div class="page-region">
                <div>
                    <div class="page-region-content tiles">
                        <div class="tile-group tile-drag" style="width: 230px; max-width: 1610px;">
                            <div class="tile double bg-color-red" data-role="tile-slider" data-param-period="5000">
                                <div class="tile-content">
                                    <img src="images/michael.jpg" class="place-right">
                                    <h2>ORGANIZER</h2>
                                    <h5>Featured Local Event</h5>
                                    <p>
                                        Featured local event TEXT GOES HERE
                                    </p>
                                </div>
                                <div class="tile-content">
                                    <img src="images/michael.jpg" class="place-right">
                                    <h2>ORGANIZER</h2>
                                    <h5>Featured Local Event</h5>
                                    <p>
                                        Featured local event TEXT GOES HERE
                                    </p>
                                </div>
                                <div class="tile-content">
                                    <img src="images/michael.jpg" class="place-right">
                                    <h2>ORGANIZER</h2>
                                    <h5>Featured Local Event</h5>
                                    <p>
                                        Featured local event TEXT GOES HERE
                                    </p>
                                </div>
                                <div class="brand">
                                    <div class="badge">number of new events</div>
                                    <img class="icon" src="images/Mail128.png"/>
                                </div>
                            </div>
                            <div class="tile double bg-color-green" data-role="tile-slider" data-param-period="4500">
                                <div class="tile-content">
                                    <img src="images/michael.jpg" class="place-right">
                                    <h2>ORGANIZER</h2>
                                    <h5>General Notice</h5>
                                    <p>
                                        General Notice TEXT GOES HERE
                                    </p>
                                </div>
                                <div class="tile-content">
                                    <img src="images/michael.jpg" class="place-right">
                                    <h2>ORGANIZER</h2>
                                    <h5>General Notice</h5>
                                    <p>
                                        General Notice TEXT GOES HERE
                                    </p>
                                </div>
                                <div class="tile-content">
                                    <img src="images/michael.jpg" class="place-right">
                                    <h2>ORGANIZER</h2>
                                    <h5>General Notice</h5>
                                    <p>
                                        General Notice TEXT GOES HERE
                                    </p>
                                </div>
                                <div class="brand">
                                    <div class="badge">number of new general notices</div>
                                    <img class="icon" src="images/Mail128.png"/>
                                </div>
                            </div>
                            <div class="tile double bg-color-blue" data-role="tile-slider" data-param-period="4750">
                                <div class="tile-content">
                                    <h2>ORGANIZER</h2>
                                    <h5>Class Notice</h5>
                                    <p>
                                        Class Notice TEXT GOES HERE
                                    </p>
                                </div>
                                <div class="tile-content">
                                    <h2>ORGANIZER</h2>
                                    <h5>Class Notice</h5>
                                    <p>
                                        Class Notice TEXT GOES HERE
                                    </p>
                                </div>
                                <div class="tile-content">
                                    <h2>ORGANIZER</h2>
                                    <h5>Class Notice</h5>
                                    <p>
                                        Class Notice TEXT GOES HERE
                                    </p>
                                </div>
                                <div class="brand">
                                    <div class="badge">number of new events</div>
                                    <img class="icon" src="images/Mail128.png"/>
                                </div>
                            </div>
                        </div>

                        <div class="tile-group tile-drag">
                            <ul class="accordion" data-role="accordion">
                                <li class="active">
                                    <a href="#"> Caption </a>
                                    <div> ...content... </div>
                                </li>
                                ...
                                <li>
                                    <a href="#"> Caption </a>
                                    <div> ...content... </div>
                                </li>
                            </ul>
                        </div>

                        <div class="tile-group tile-drag">
                            <div>
                                <table class="bordered">
                                    <tr><td>Upcoming Event</td></tr>
                                    <tr><td>Upcoming Test</td></tr>
                                    <tr><td>Upcoming Assignment</td></tr>
                                    <tr><td>Upcoming Fees</td></tr>
                                </table>
                            </div>
                            <div class="tile double bg-color-yellow" data-role="tile-slider" data-param-period="4250">
                                <div class="tile-content">
                                    <h2>ORGANIZER</h2>
                                    <h5>Who checked out what</h5>
                                    <p>
                                        TEXT Goes here
                                    </p>
                                </div>

                                <div class="tile-content">
                                    <h2>ORGANIZER</h2>
                                    <h5>Featured Local Event</h5>
                                    <p>
                                        Featured local event TEXT GOES HERE
                                    </p>
                                </div>
                            </div>
                            <div class="tile double bg-color-red" data-role="tile-slider" data-param-period="5000">
                                <div class="tile-content">
                                    <img src="images/michael.jpg" class="place-right">
                                    <h2>ADVERTISER</h2>
                                    <h5>ADVERTISEMENT</h5>
                                    <p>
                                        TEXT GOES HERE
                                    </p>
                                </div>
                                <div class="tile-content">
                                    <img src="images/michael.jpg" class="place-right">
                                    <h2>ADVERTISER</h2>
                                    <h5>ADVERTISEMENT</h5>
                                    <p>
                                        TEXT GOES HERE
                                    </p>
                                </div>
                                <div class="tile-content">
                                    <img src="images/michael.jpg" class="place-right">
                                    <h2>ADVERTISER</h2>
                                    <h5>ADVERTISEMENT</h5>
                                    <p>
                                        TEXT GOES HERE
                                    </p>
                                </div>
                            </div>

                        </div>
                    </div>
                      <div class="page-region-content tiles" >
    <div class="tile-group tile-drag" style="width: auto; z-index: 80; margin-top: 360px; margin-left: 157px; position: fixed; max-width: 1192px;">
        <div class="tile icon">
                    <div class="tile-content">
                        <img src="images/Mail128.png"/>
                    </div>
                    <div class="brand">
                        <div class="badge">10</div>
                        <div class="name">Mail</div>
                    </div>
                </div><div class="tile icon">
                    <div class="tile-content">
                        <img src="images/Mail128.png"/>
                    </div>
                    <div class="brand">
                        <div class="badge">10</div>
                        <div class="name">Mail</div>
                    </div>
                </div>
        <div class="tile icon">
                    <div class="tile-content">
                        <img src="images/Mail128.png"/>
                    </div>
                    <div class="brand">
                        <div class="badge">10</div>
                        <div class="name">Mail</div>
                    </div>
                </div>
        
        <div class="tile icon">
                    <div class="tile-content">
                        <img src="images/Mail128.png"/>
                    </div>
                    <div class="brand">
                        <div class="badge">10</div>
                        <div class="name">Mail</div>
                    </div>
                </div>
        <div class="tile icon">
                    <div class="tile-content">
                        <img src="images/Mail128.png"/>
                    </div>
                    <div class="brand">
                        <div class="badge">10</div>
                        <div class="name">Mail</div>
                    </div>
                </div>
    </div>
    </div>   
                </div>
                </body>
                </html>